<template>
  <view>
    <view class="page">
      <view class="headPart">
        <view class="headMask h-full w-full">
          <view
            class="title col-white f-s-40 fw-600"
            :style="'top:' + 120 + 'rpx'"
            >{{ title }}</view
          >
          <view class="infoPart flex" @click="goToInfo">
            <view class="leftInfo">
              <image
                src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/cashRegisterImg/chuanShu.png"
                class="chuanShu"
                mode="scaleToFill"
              />
            </view>
            <view class="rightInfo">
              <view class="infoTitle fw-600 col-white">......</view>
              <view class="infoCode f-s-36 fw-600 dinAlternate"
                >195****0042</view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="opverviewPart">
        <view class="opverview bg-white">
          <view class="flex align-center" @click="goToAccountBalance">
            <view class="mark col-balck f-s-28 fw-600">账户总览</view>
            <image
              src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/merchant/forwardShow.png"
              class="forwardShow"
              mode="scaleToFill"
            />
          </view>
          <view class="collect flex justify-between">
            <view class="leftPart">
              <view class="txt f-s-24">总资产</view>
              <view class="num fw-600 dinAlternate">¥ 2498.00</view>
            </view>
            <view class="rightPart">
              <view class="txt f-s-24">昨日收入</view>
              <view class="num fw-600 dinAlternate">¥ 4.85</view>
            </view>
          </view>
        </view>
        <view class="service bg-white">
          <view class="order-hd flex align-center" @click="goToOrder()">
            <view class="lead f-s-32 fw-600">我的订单</view>
          </view>
          <view class="abilityPart flex">
            <view
              class="abilityItem"
              @click="goToFinance(item)"
              v-for="(item, index) in orderList"
              :key="index"
            >
              <image :src="item.img" class="orderIcon" mode="scaleToFill" />
              <view class="abilityName f-s-28 fw-600 mt-20">{{
                item.value
              }}</view>
            </view>
          </view>
        </view>
        <view class="service bg-white">
          <view class="order-hd flex align-center">
            <view class="lead f-s-32 fw-600">功能服务</view>
          </view>
          <view class="abilityPart flex">
            <view
              class="abilityItem"
              @click="goToFinance(item)"
              v-for="(item, index) in abilityList"
              :key="index"
            >
              <image
                :src="item.icon"
                class="abilityIcon"
                :class="'classIcon' + (index + 1)"
                mode="scaleToFill"
              />
              <view class="abilityName f-s-26 fw-600 mt-20">{{
                item.value
              }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="padding-bottom: 80px">
      <!-- 确保内容不被 TabBar 遮挡 -->
    </view>
    <custom-tabbar :selected="4" @change="onTabChange" />
    <!-- <customTabBar ref="customTabBar"></customTabBar> -->
  </view>
</template>
<script>
import customTabbar from "@/components/custom-tabbar.vue";
export default {
  components: {
    customTabbar,
  },

  data() {
    return {
      title: "个人中心",
      backgroundColor: "#fff",
      orderList: [
        {
          value: "待付款",
          url: "/pages/goods/order_list/index?status=UNPAID",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/obligationIcon.png",
        },
        {
          value: "待发货",
          url: "/pages/goods/order_list/index?status=PAID",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/pendshipment.png",
        },
        {
          value: "待收货",
          url: "/pages/goods/order_list/index?status=NOT_RECEIVING_CLERK",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/pendingReceipt.png",
        },
        {
          value: "已完成",
          url: "/pages/goods/order_list/index?status=COMPLETE",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/completedIcon.png",
        },
      ], // 订单状态列表
      abilityList: [
        {
          value: "收货地址",
          url: "/pages/address/user_address_list/index",
          icon: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/addressIcon.png",
        },
        {
          value: "分享APP",
          url: "/pages/share_hamster/index",
          icon: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/divideIcon.png",
        },
        // {
        //   value: "联系客服",
        //   url: "",
        //   icon: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/customerService.png",
        // },
        {
          value: "关于我们",
          url: "",
          icon: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/helpIcon.png",
        },
        {
          value: "用户等级",
          url: "",
          icon: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/gradeIcon.png",
        },
        // {
        //   value: "实名认证",
        //   url: "",
        //   icon: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/realName.png",
        // },
      ], // 功能列表
    };
  },
  onLoad() {},
  onShow() {
  },
  methods: {
    // 前往个人中心
    goToInfo() {
      uni.navigateTo({
        url: "/pages/myInfo/index",
      });
    },
    // 跳转到订单页面全部状态
    goToOrder() {
      uni.navigateTo({
        url: "/pages/goods/order_list/index?status=ALL",
      });
    },
    // 前往账户余额
    goToAccountBalance() {
      uni.navigateTo({
        url: "/pages/accountBalance/index",
      });
    },
    goToFinance(data) {
      if (data.url) {
        uni.navigateTo({
          url: data.url,
        });
      } else {
        uni.showToast({ title: "功能暂未开放", icon: "none" });
      }
    },
    onTabChange(index) {
      // 可以在这里处理 Tab 切换的逻辑
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .headPart {
    position: relative;
    background-color: #21222c;
    height: 466rpx;
    .headMask {
      background: url("https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/merchant/personalCenter.png")
        no-repeat;
      background-size: cover;
      .title {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
.infoPart {
  position: absolute;
  left: 36rpx;
  bottom: 90rpx;
  .rightInfo {
    margin-left: 22rpx;
  }
  .infoCode {
    margin-top: 6rpx;
    font-size: 36rpx;
    color: #91929b;
  }
  .infoTitle {
    font-size: 42rpx;
  }
}
.opverviewPart {
  position: relative;
  top: -66rpx;
}
.opverview {
  padding: 30rpx 28rpx;
  margin: 0rpx 44rpx;
  border-radius: 24rpx;
}
.service {
  border-radius: 24rpx;
  padding: 0rpx 28rpx 44rpx 28rpx;
  margin: 24rpx 44rpx 0rpx 44rpx;
}
.order-hd {
  justify-content: space-between;
  font-size: 30rpx;
  color: #282828;
  padding: 0 10.47rpx;
  height: 87.21rpx;
  border-bottom: 2rpx solid #f5f5f5;
}
.collect {
  margin-top: 30rpx;
  .rightPart {
    text-align: right;
  }
  .txt {
    color: #a7a7a7;
  }
  .num {
    font-size: 48rpx;
    margin-top: 20rpx;
  }
}
.abilityPart {
  flex-wrap: wrap;
  padding: 20rpx;
  .abilityItem {
    width: 25%;
    margin-top: 52rpx;
    text-align: center;
  }
}
.orderIcon {
  width: 142rpx;
  height: 104rpx;
}
.forwardShow {
  width: 10rpx;
  height: 20rpx;
  margin-left: 16rpx;
}
.chuanShu {
  height: 100rpx;
  width: 100rpx;
  border-radius: 60rpx;
}
.classIcon1 {
  width: 44rpx;
  height: 48rpx;
}
.classIcon2 {
  width: 48rpx;
  height: 48rpx;
}
.classIcon3 {
  width: 48rpx;
  height: 48rpx;
}
.classIcon4 {
  width: 52rpx;
  height: 48rpx;
}
.classIcon5 {
  width: 54rpx;
  height: 46rpx;
}
.classIcon6 {
  width: 55rpx;
  height: 46rpx;
}
</style>
